import * as React from 'react'
import { NavBar, Icon, Item } from 'components'
import { formatPriceStr } from '../../methods'
import './index.less'
import { post } from '../../../../utils'

export default class MyBeans extends React.Component<any, any> {
    public componentDidMount () {
        this.getData()
    }
    public render(): JSX.Element {
        const data = this.props.userBeans
        return (
            <div className="myBeans">
                <NavBar
                    className="myBeans__bar"
                    title="我的恒豆"
                    right=" "
                    fixed={true}
                    divider={false}
                />
                <div className="myBeans_header">
                    <img src={require('../../../../assets/buyBeans.jpg')} />
                    <div className="myBeans_header__my">
                        <div className="title">我的恒豆</div>
                        <div className="number flex_center">{data.bean && formatPriceStr(data.bean)}</div>
                    </div>
                    <div className="myBeans_header_InfoWrap myBeans_top_balance">
                        <div>
                            <div className="DINPro" style={{fontSize: '0.97rem'}}>{data.frozen_bean && formatPriceStr(data.frozen_bean.toString())}</div>
                            <div>冻结恒豆数</div>
                        </div>
                        <div>
                            <div className="DINPro" style={{fontSize: '0.97rem'}}>{data.all && formatPriceStr(data.all.toString())}</div>
                            <div>总恒豆数</div>
                        </div>
                    </div>
                </div>
                <Item 
                    onPress={() => {this.goToUrl('/My/beansOrder')}}
                    className="myBeans_operation_item" 
                    title={<div className="myBeans_operation_item_title">
                        <Icon type="order_hd" style={{color: '#ff9710', fontSize: '0.9rem'}} /> 
                        <span>恒豆订单</span>
                    </div>} 
                    value={<Icon className="myBeans_operation_item_value" type="arrow_right" />} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/saleBeans')}}
                    className="myBeans_operation_item" 
                    title={<div className="myBeans_operation_item_title">
                        <Icon type="money" style={{color: '#0094f2', fontSize: '1.1rem', position: 'relative', left: '-0.1rem'}} /> 
                        <span style={{paddingLeft: '0.4rem'}}>出售恒豆</span>
                    </div>} 
                    value={<Icon className="myBeans_operation_item_value" type="arrow_right" />} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/mySoldList')}}
                    className="myBeans_operation_item myBeans_mgt5" 
                    title={<div className="myBeans_operation_item_title">
                        <Icon type="order_list" style={{color: '#ff7d29'}} /> 
                        <span style={{paddingLeft: '0.55rem'}}>我出售的恒豆</span>
                    </div>} 
                    value={<Icon className="myBeans_operation_item_value" type="arrow_right" />} 
                />
                <Item 
                    onPress={() => {this.goToUrl('/My/myHdBill')}}
                    className="myBeans_operation_item" 
                    title={<div className="myBeans_operation_item_title">
                        <Icon type="order_list" style={{color: '#00cea5'}} /> 
                        <span style={{paddingLeft: '0.55rem'}}>恒豆明细</span>
                    </div>} 
                    value={<Icon className="myBeans_operation_item_value" type="arrow_right" />} 
                />
            </div>
        )
    }
    public getData = () => {
        const { userInfo, SET_MYUTILS_BEANS, SET_USER_INFO} = this.props
        post('usersapi/userBean', {
            userId: userInfo.id
        }).then((data: any) => {
            SET_MYUTILS_BEANS(data)
            let obj = JSON.parse(JSON.stringify(userInfo))
            obj.all = data.all
            obj.bean = data.bean
            obj.frozen_bean = data.frozen_bean
            SET_USER_INFO(obj)
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}